<template>
	<div class="kaoguanguanli">
    <top></top>
    <div class="flexcc">
      <img src="../../../static/img2/banner2.png">
    </div>
<!--    <div style="background: #f7f7f7;padding: 30px 0 30px;">
      <div class="ww" style="font-size: 36px;">
        赛事介绍
      </div>
    </div> -->

    <div class="ww" style="padding: 20px 0 50px;">
      <div style="margin-bottom: 30px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>赛事介绍</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="border: 1px #eaeaea solid; padding: 20px; border-radius: 5px; margin-bottom: 20px; background: #fff;" class="flexbc" v-for="item in tableData" :key="item.id">
        <div class="flexc" style="line-height: 35px; cursor: pointer;" @click="chakanxiangqing(item)">
          <div style="width: 200px; height: 150px; overflow: hidden; background: #eaeaea; margin-right: 30px;" class="flexcc"><img :src="item.cover_url"></div>
          <div class="flexbc" style="width: 900px; font-size: 14px; color: #999;">
            <div>
              <div style="font-weight: bold; font-size: 16px; color: #333;">{{item.name}}</div>
              <div>比赛时间：{{item.match_time_start}}——{{item.match_time_end}}</div>

              <div v-if="item.province != '全国'">比赛地点：{{item.province}}/{{item.city}}/{{item.district}}</div>
              <div v-if="item.province == '全国'">比赛地点：全国</div>
              
              <div><span style="color: #f00;">{{item.competition_status_name}}</span></div>
            </div>
            <div style="display: flex; justify-content: flex-end;">
              <div>
                <div style="display: flex; justify-content: flex-end;">报名时间:{{item.sign_up_time_start}}——{{item.sign_up_time_end}}</div>
                <div style="display: flex; justify-content: flex-end;">倒计时：<span style="color: #f00;">{{item.guanmen}}</span></div>
                <!-- <div style="display: flex; justify-content: flex-end;"><el-button type="primary" size="mini" @click="chakanxiangqing(item)">查看详情</el-button></div> -->
                <div style="display: flex; justify-content: flex-end;"><el-button type="primary" size="small" @click.stop="baomingkai(item)">立即报名</el-button></div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>

    <baoming ref="baoming" :id="dangqianid" v-if="relo" @baomingwancheng="baomingwancheng"></baoming>
	</div>
</template>

<script>
  import baoming from './baoming.vue'
  import QRCode from 'qrcodejs2'
  import top from '../top.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      top,baoming
    },
		data() {
			return {

        search:{
          page:1,
          page_size:20,
        },
        total:0,
        tableData:[],
        daojishilist:[],
        dangqianid:"",
        relo:false
			}
		},

    beforeDestroy() {
      this.daojishilist.forEach((item)=>{
        clearInterval(item)
      })
    },
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      baomingwancheng:function(){

      },
      baomingkai:function(item){
        this.dangqianid = item.id
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
          this.$nextTick(()=>{
            this.$refs.baoming.baomingkai()
          })
          
        })
      },

      chakanxiangqing:function(item){
        this.$router.push('/saishijieshao/detail?id='+item.id)
      },


      getlist:function(){
        axios.get(this.IP_URL+'/api/competition/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total

            this.daojishilist = []

            this.tableData.forEach((item,index)=>{

              let now = moment()
              let time = moment(item.sign_up_time_end)
              let miao = time.diff(now, 'seconds')

              if (miao > 0) {
                this.daojishilist[index] = setInterval(() => {
                  let result = parseInt(miao--)
                  if (miao > 0) {
                    let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math
                      .floor(result / 3600);
                    let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 %
                      60)) : Math.floor((result / 60 % 60));
                    let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math
                      .floor((result % 60));

                    let res = '';
                    if (h !== '00') res += `${h}小时`;
                    if (m !== '00') res += `${m}分`;
                    res += `${s}秒`;

                    this.$set(this.tableData[index], 'guanmen', res)
                  }
                }, 1000)
              }else{
                this.$set(this.tableData[index], 'guanmen', '已结束')
              }
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{ width: 300px;}
</style>
